<template>
    <div>
      <el-container>
        <el-header style="position: relative; 
        height: 50px; width: 100%;">
          <ul id="header" style="list-style-type: none;
          margin: 0px auto;padding-inline-start: 0px; overflow: hidden;
          background-color: black; color: aliceblue;">
            <li class="header_li" style="float:left;"><a href="/home">主页</a></li>
            <li class="header_li" style="float:left;"><a href="/about">关于</a></li>
            <li class="header_li" style="float:left;"><a href="/contact">联系</a></li>
            <li class="header_li" style="float:left;"><a href="/lastanalyse">最近分析</a></li>
            <el-dropdown style="float:right; margin-right: 30px;">
              <span class="el-dropdown-link">个人中心</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item divided >
                  <a href="/" style="color: black;">注销</a></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </ul>
        </el-header>
        <el-container style="height: calc(100vh - 50px);">
            <el-aside style="width: 250px;">
                <el-menu :default-openeds="['1', '3']" :default-active="this.$router.path" router>
                <el-menu-item index="/demo/main">
                  <i class="el-icon-s-flag"></i>
                  <span slot="title">APP信息</span>
                </el-menu-item>
  
                <el-menu-item index="/demo/qianming">
                  <i class="el-icon-s-check"></i>
                  <span slot="title">签名证书</span>
                </el-menu-item>
  
                <el-menu-item index="/demo/quanxian">
                  <i class="el-icon-warning"></i>
                  <span slot="title">危险动作</span>
                </el-menu-item>
                
              <el-menu-item index="/demo/URL">
                <i class="el-icon-s-opportunity"></i>
                <span slot="title">域名</span>
              </el-menu-item>

              <el-menu-item index="/demo/list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">黑白名单</span>
              </el-menu-item>
              </el-menu>
            </el-aside>
            <el-main >  
              <router-view/>
            </el-main>
        </el-container>
        </el-container>
    </div>
  
  </template>
  
  <script>
  
  export default {
    name: 'PresentView',
  
  }
      
  </script>
  
  
  <style>
  li a {
    display: block;
    color: #ccc;
    text-align: center;
    padding: 0px 30px;
    text-decoration: none;
  }
  
  li a:hover {
    color: white;
  }
  
  html,body,#app,el-container{
    margin: 0px;
    padding: 0px;
    height: 100%;
  }
  .el-header{
    background-color: #B3C0D1;
    color: #333;
    padding: 0px ;
    text-align: center;
    line-height: 50px;
  }
  
  .el-aside {
    width: 200px;
    color: #333;
    /* text-align: center; */
    line-height: 100%;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 25px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  
  </style>
  